import React, {useEffect, useState} from 'react';
import SearchPanel from "./search-panel";
import List from "./list";
import {cleanObject, useDebounce, useMount} from "../../utils";
import qs from "qs";

// cra 会根据 start / build 选择不同的配置文件
const apiURL = process.env.REACT_APP_API_URL;
function ProjectListScreen(props) {
    const [params, setParams] = useState({
        name: '',
        personId: ''
    })
    const debouncedParams = useDebounce(params, 2000)
    const [list, setList] = useState([])
    const [users, setUsers] = useState([])

    useEffect(() => {
        fetch(`${apiURL}/projects?${qs.stringify(cleanObject(debouncedParams))}`).then(async res => {
            if (res.ok) {
                setList(await res.json())
            }
        })
    }, [debouncedParams]);

    useMount(() => {
        fetch(`${apiURL}/users`).then(async res => {
            if (res.ok) {
                setUsers(await res.json())
            }
        })
    });

    return (
        <div>
            <SearchPanel users={users} params={params} setParams={setParams} />
            <List users={users} list={list} />
        </div>
    );
}

export default ProjectListScreen;